<template>
  <div class="article-container">
    <van-nav-bar fixed border title="文章详情" left-text="更多" @click-left="$router.push('/')" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <van-loading v-if="!loading" size="24px" vertical>加载中...</van-loading>
    <div v-if="loading">
      <van-row type="flex" justify="center" class="titlebar">
        <van-col span="18"><h5 class="texttitle">{{textDetail.title}}</h5></van-col>
      </van-row>
      <van-card :desc="textDetail.aut_name"
                title="文章作者"
                :thumb="imgMag"
                class="buju">
        <template #tags class="biaoqian">
          <van-tag plain type="primary">未经授权禁止转载</van-tag>
          <van-tag plain type="primary">原创</van-tag>
        </template>
        <template #footer>
          <van-button icon="info-o" size="mini" type="info" @click="goautor">作者详情</van-button>
        </template>
      </van-card>
      <div class="buju">
        <van-row type="flex" justify="center">
          <van-col span="19" @click="showImg"><img :src="imgMag2" style="width:100%;height:150px;" /></van-col>
        </van-row>

        <van-row>
          <van-col class="wenzhang" type="flex" justify="center" offset="4" span="16">
            <p>科幻世界杂志社编辑出版的杂志，前身是《科学文艺》和《奇谈》，至今已有四十年的历史；有数据显示《科幻世界》发行量最少的一期仅七百份，最高时发行量40万份，现在每月也有10万份的发行量，是全世界发行量最大的科幻杂志，</p>
            <p>曾获得“世界科幻协会最佳期刊奖”、“中国国家期刊奖提名奖”，并入选“中国百种重点社科期刊”、“双奖期刊”，曾承办过1991年世界科幻协会年会</p>
            <p class="van-ellipsis">，是中国科幻期刊中一面历久弥新的金牌</p>
          </van-col>
        </van-row>
      </div>
      <div class="buju">
        <div class="jingxuan">精选评论</div>
        <van-row class="pinglunqu" v-for="(item,index) in chats" :key="index">
          <van-col class="" offset="2" span="5">
            <van-icon name="friends" size="30" color="#1989fa" />
          </van-col>
          <van-col class="" span="14">
            <p>{{item.usertext}}</p>
          </van-col>
        </van-row>
      </div>
      <van-goods-action>
        <van-goods-action-icon v-if="!islike" icon="like-o" text="收藏" @click="setLike" />
        <van-goods-action-icon v-else icon="like" text="已收藏" @click="setLike" />
        <van-goods-action-icon icon="share-o" text="分享" @click="showShare=true" />
        <van-goods-action-button type="danger"
                                 text="评论"
                                 color="#d75f95"
                                 @click="$router.push('/comment')" />
      </van-goods-action>
    </div>
    <!--分享框-->
    <van-share-sheet v-model="showShare"
                     :options="options"
                     title="立即分享给好友"
                     @cancel="showshare=false"
                     @click-overlay="showshare=false" />
  </div>
</template>

<script>
import { list } from '@/static/article-list'
import { setTimeout } from 'core-js'
import { ImagePreview } from 'vant'
import { mapState } from 'vuex'
export default {
  name: 'TextDetail',
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  data () {
    return {
      loading: false,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link', description: '描述信息' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      textid: this.$route.params.id,
      textDetail: {},
      photoid: '',
      imgMag: '',
      imgMag2: '',
      // 点击切换喜欢
      like: false,
      message: '',
      usertext: '这个作者关注好久了',
      chats: [
        { usertext: '这个作者关注好久了' },
        { usertext: 'i了i了' },
        { usertext: '支持！！！' }
      ]
    }
  },
  computed: {
    islike () {
      return this.$store.state.textLike.findIndex(val => val.textid === this.textid) !== -1
    },
    autorinfo () {
      return this.autorlist.find(val => val.name === this.textDetail.aut_name)
    },
    ...mapState(['autorlist'])
  },
  created () {
    this.getTextById()
  },
  methods: {
    getTextById () {
      this.loading = false
      var arr = []
      list.forEach(val => {
        arr.push(...val.result)
        // arr = val.result.filter(val => val.textid === this.textid)
      })
      this.textDetail = arr.find(val => val.textid === parseInt(this.textid))
      var p = this.autorinfo.photo
      this.imgMag = require('@/assets/touxiang/' + p)
      this.imgMag2 = require('@/assets/photo' + this.$route.params.id.toString().slice(0, 1) + '/p1 (' + this.textDetail.id + ').webp')
      setTimeout(() => {
        this.loading = true
      }, 1000)
    },
    showImg () {
      ImagePreview({
        images: [
          this.imgMag2
        ],
        closeable: true
      })
    },
    setLike () {
      if (!this.islike) {
        this.$store.commit('addLikeText', { textid: this.textid, id: this.textDetail.id })
        this.$toast.success('收藏成功！')
      } else {
        this.$store.commit('removeLikeText', this.textid)
        this.$toast.fail('已取消收藏')
      }
    },
    goautor () {
      if (this.autorinfo.name !== 'damo') {
        this.$router.push(`/autor/${this.autorinfo.name}`)
      } else {
        this.$router.push('/my')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .article-container {
    background-color:#f0f0f0;
  // .van-card
  // {
  // }
  .van-tag{
    margin: 0 20px;
  }
  .van-card__desc {
    margin: 20px 0px;
    font-size: 30px!important;
  }
  .texttitle{
    font-size:35px;
    text-align:center;
  }
  .wenzhang{
    p {
          margin:0;
          font-size: 35px;
      }
  }
  .jingxuan {
    font-size: 30px;
    margin: 30px 0 30px 50px;
    padding-top:20px;
  }
  .pinglunqu{
    .van-col:nth-child(2){
    border-bottom:1px solid #808080;
    p{
       margin:40px 20px 0 0;
       font-size:30px;
     }
  }
  .van-icon{
      margin-top:30px;
  }
  }
  .shangfanganniu{
    position:absolute;
    top:20px;
    width:200px;
    height:60px;
    right: 20px;
  }
  .titlebar{
    margin-top: 80px;
    margin-bottom: -50px;
  }
  .buju {
    background-color: #ffffff;
    margin-bottom: 70px;
    border-radius:15px;
    padding-bottom:40px;
    padding-top: 40px;
    box-shadow: 2px 3px 10px 10px #e9e9e9;
  }
  .van-loading {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translate(-50%,0);
  }
  }
</style>
